<template>
  <Card title="产品与服务" :padding="[32]" :show-divider="false">
    <view class="hb-mt-3 hb-flex hb-flex-wrap hb-gap-2">
      <view v-for="(item, index) in botProductServiceVoList" :key="index">
        <view
          class="hb-flex hb-flex-col hb-items-center hb-gap-2 hb-w-[298rpx]"
          @click="handleProductServiceDetail(item)"
        >
          <TImage
            width="298rpx"
            height="298rpx"
            error-img-type="default"
            :src="item.masterImage"
            border-radius="16rpx"
          />
          <text class="hb-text-sm hb-text-[#646566] hb-break-all text-overflow-2">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </Card>
</template>

<script setup lang="ts">
  import { BotProductService } from '@/api/card/type';
  import Card from '../../components/Card/index.vue';

  interface ProductServiceProps {
    botProductServiceVoList: BotProductService[];
  }

  defineProps<ProductServiceProps>();

  const handleProductServiceDetail = (item: BotProductService) => {
    navigateTo({
      name: 'productDetail',
      options: {
        uuid: item.uuid!,
      },
    });
  };
</script>
